<template>
  <div class="contentList">
    <div class="center">
      <div class="left">
        <div class="left-img">
          <img class="img-big" src="./img/img1.jpg" alt="">
        </div>
        <div class="left-buttom">
          <div class="left-buttom-top">
            家装设计整体效果图
          </div>
          <div class="left-buttom-buttom">
            <div class="buttom-left">
              <img class="left-buttom-top-indoorimg" src="./img/indoor2x.png" alt="">
              室内商品总价：
              <span class="price">￥20000</span>
            </div>
            <div class="buttom-right">
              <img class="left-buttom-top-fitupimg" src="./img/fitup2x.png" alt="">
              装修总价：
              <span class="price">￥20000</span>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="right-list" v-for="item in goods_info" :key="item.id"  @click="$router.push({ path: '/goodsCart' })">
          <div class="right-img">
            <img class="img-big" :src="item.img" alt="">
          </div>
          <div class="buttom">
            <div class="buttom-list">家装设计整体效果图</div>
            <div class="buttom-price"><img class="right-buttom-top-indoorimg" src="./img/indoor2x.png" alt="">室内商品总价：<span class="price">￥{{item.indoorPrice}}</span></div>
            <div class="buttom-price"><img class="right-buttom-top-fitupimg" src="./img/fitup2x.png" alt="">装修总价：<span class="price">￥{{item.trimPrice}}</span></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
    name: 'contentList',
    props: {
      goodsInfo: {
        type: Array,
        required: true
      }
    },
    computed: {
      goods_info() {
        return this.goodsInfo
      },
    },
    data() {
      return {
      }
    }
  }
</script>
<style scoped lang="scss">
.contentList {
  .center {
    width: 84%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    .left {
      width: 49%;
      height: 700px;
      box-shadow:0px 3px 9px 0px rgba(193,193,193,1);
      border-radius:3px;
      cursor: pointer;
      .left-img {
        height: 600px;
        min-height: 600px;
        .img-big {
          width: 100%;
          height: 100%;
        }
      }
      .left-buttom-top {
        margin: 20px 0 10px 14px;
        font-size: 14px;
      }
      .left-buttom-top-indoorimg {
        width: 16px;
        height: 20px;
        margin: 0 4px 8px 0;
        vertical-align: middle;
      }
      .left-buttom-top-fitupimg {
        width: 16px;
        height: 20px;
        margin-right: 4px;
        vertical-align: middle;
      }
      .left-buttom-buttom {
        display: flex;
        justify-content: space-between;
        margin: 20px 14px 10px 14px;
        font-weight: bold;
        font-size: 16px;
      }
    }
    .price {
      color: $mate-color;
    }
    .right-buttom-top-fitupimg {
      width: 10px;
      height: 14px;
      margin-right: 4px;
      vertical-align: middle;
    }
    .right-buttom-top-indoorimg {
      width: 10px;
      height: 14px;
      margin: 0 4px 2px 0;
      vertical-align: middle;
    }
    .right {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      width: 49%;
      align-content: space-between;
      .right-list {
        width: 48%;
        height: 340px;
        box-shadow:0px 3px 9px 0px rgba(193,193,193,1);
        border-radius:3px;
        cursor: pointer;
        .right-img {
          height: 240px;
          min-height: 240px;
          .img-big {
            width: 100%;
            height: 100%;
          }
        }
        .buttom {
          padding: 10px 0 10px 10px;
          line-height: 26px;
        }
      }
      .buttom-list {
        font-size: 15px;
      }
      .buttom-price {
        font-size: 15px;
        font-weight: bold;
      }
    }
  }
}
</style>
